<template>
  <view class="debug-container">
    <view class="header">
      <text class="title">API调试页面</text>
    </view>

    <view class="test-section">
      <button class="test-btn" @click="testAdminNamesAPI">测试管理员列表API</button>
      <button class="test-btn" @click="testDirectAPI">直接测试API</button>
    </view>

    <view class="result-section">
      <view class="section-title">测试结果</view>
      <view class="result-content">
        <text>{{ testResult }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'
import request from '@/utils/request.js'

export default {
  name: 'DebugAPI',
  setup() {
    const testResult = ref('点击按钮开始测试...')

    // 测试管理员列表API
    const testAdminNamesAPI = async () => {
      testResult.value = '正在测试管理员列表API...'
      
      try {
        console.log('开始请求管理员列表API...')
        const response = await request.request({
          url: '/feedback/admin-names',
          method: 'GET'
        })
        
        console.log('API响应:', response)
        testResult.value = `API响应结果：\n${JSON.stringify(response, null, 2)}`
      } catch (error) {
        console.error('API请求错误:', error)
        testResult.value = `API请求错误：\n${error.message}\n${error.stack}`
      }
    }

    // 直接测试API（不通过request工具）
    const testDirectAPI = async () => {
      testResult.value = '正在直接测试API...'
      
      try {
        console.log('开始直接请求API...')
        const response = await uni.request({
          url: 'http://localhost:8080/feedback/admin-names',
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
          }
        })
        
        console.log('直接API响应:', response)
        testResult.value = `直接API响应结果：\n${JSON.stringify(response, null, 2)}`
      } catch (error) {
        console.error('直接API请求错误:', error)
        testResult.value = `直接API请求错误：\n${error.message}\n${error.stack}`
      }
    }

    return {
      testResult,
      testAdminNamesAPI,
      testDirectAPI
    }
  }
}
</script>

<style scoped>
.debug-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.test-section {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.test-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.test-btn:last-child {
  margin-bottom: 0;
}

.result-section {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.result-content {
  background-color: #f8f8f8;
  padding: 20rpx;
  border-radius: 10rpx;
  min-height: 200rpx;
}

.result-content text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>


